<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/8/31
  Time: 11:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入taglib指令--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>用户列表数据</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script>
            //原生js方式
        function deleteItem(uid){
                  //  alert("超链接失效,触发点击了,");
                //友情提示
            //确认提示框
          if(window.confirm("您确认删除吗?")){
                //js---BOM操作:基于浏览器对象模型编程:将浏览器的每一个部分看成窗口
             // window对象:顶级对象,频繁可以不写
              //里面包含location:地址栏对象
              //location.href [ = sURL ]

              window.location.href="${pageContext.request.contextPath}/deleteUser?uid="+uid;

          }

        }


        //原生js:页面载入事件
        window.onload = function () {
            //alert("页面载入事件触发") ;

            //获取第一个复选框的标签对象,添加点击事件
            document.getElementById("firstCheckBox").onclick=function(){

                //获取后面所有复选框的标签对象列表:
                var cbxs = document.getElementsByName("item") ;
                //遍历这个列表
                for(var i = 0 ; i < cbxs.length ; i++){
                    //获取每一个条目对象
                    //在复选框:checked属性 :选择状态 保持一致
                    cbxs[i].checked = this.checked;
                }


            }
        } ;


    </script>
</head>
<body>
    <table class="table table-bordered table-hover table-striped">
        <tr>
            <th>
                <input type="checkbox" id="firstCheckBox" />
            </th>
            <th>用户uid</th>
            <th>用户名-昵称</th>
            <th>密码</th>
            <th>真实姓名</th>
            <th>邮箱</th>
            <th>出生日期</th>
            <th>性别</th>
            <th>激活状态</th>
            <th>操作</th>
        </tr>

        <c:forEach items="${list}" var="u" varStatus="status">
            <%--
                    ${list}---List<User>
            --%>
            <tr>
                <td>
                    <input type="checkbox"  name="item" />
                </td>
                <td>${u.uid}</td>
                <td>${u.username}</td>
                <td>${u.password}</td>
                <td>${u.name}</td>
                <td>${u.email}</td>
                <td>${u.birthday}</td>
                <td>${u.sex}</td>
                <td>${u.state}</td>
                <td>
                    <%--前端改造: 跳转后台 进行第一步:通过uid查询用户--%>
                    <a href="${pageContext.request.contextPath}/findUser?uid=${u.uid}" class="btn btn-primary">修改</a>
                    <a href="javascript:void(0)" id="deleteItem" onclick="deleteItem(${u.uid})" class=" btn btn-danger">删除</a>
                    <%--
                        删除某个用户
                            方式1:直接超链接 href="${pageContext.request.contextPath}/delete?uid=${u.uid}"

                            方式2:通过js方式,需要这个超链接失效,触发点击事件
                    --%>
                </td>
            </tr>
        </c:forEach>


       <%--<tr>--%>
          <%--  <td>ASDFSBSF</td>
            <td>张三</td>
            <td>123456</td>
            <td>张三丰</td>
            <td>zhangsanfeng@163.com</td>
            <td>1990-2-2</td>
            <td>男</td>
            <td>0</td>
            <td>
                <a href="" class="btn btn-primary">修改</a>
                <a href="" class=" btn btn-danger">删除</a>
            </td>--%>
      <%--  </tr>--%>
       <%-- <tr>--%>
            <%--<td>ASDFSBSF</td>
            <td>张三</td>
            <td>123456</td>
            <td>张三丰</td>
            <td>zhangsanfeng@163.com</td>
            <td>1990-2-2</td>
            <td>男</td>
            <td>0</td>
            <td>
                <a href="" class="btn btn-primary">修改</a>
                <a href="" class=" btn btn-danger">删除</a>
            </td>--%>
       <%-- </tr>--%>
    </table>
    <div>
        <a href="#" class="btn btn-danger" style="float: right;margin-right: 50px">删除选中</a>
    </div>

    <div style="margin-left: 450px">
        <%--分页组件--%>
        <nav aria-label="Page navigation">
            <ul class="pagination">
    <%--                上一页--%>
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
        <%--下一页--%>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
<span style="float: right;margin-right: 40px">
    共有: 页    每页显示 条
</span>
</body>
</html>
